<template>
	<view class="login">
		<view class="content">
			<view class="header">
				<text>欢迎使用</text>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<view class="input-wrap">
					<view class="icon-wrap">
						<text class="iconfont">租户</text>
					</view>
					<sky-search-select v-model="tenantId" :localdata="range" @change="change"></sky-search-select>
				</view>
				<view class="input-wrap">
					<view class="icon-wrap">
						<text class="iconfont">&#xe659;</text>
					</view>
					<input v-model="username" type="text" maxlength="11" placeholder="请输入手机号"
						placeholder-class="login-placeholder" />
				</view>
				<view class="input-wrap">
					<view class="icon-wrap">
						<text class="iconfont">&#xe65d;</text>
					</view>
					<input v-model="password" type="password" placeholder="请输入密码"
						placeholder-class="login-placeholder" />
				</view>
			</view>
			<view :class="{'disabled':disabled}" class="login-btn" @click="startLogin()">
				<text v-if="!isRotate">登录</text>
				<text v-if="isRotate">登录中</text>
			</view>
			<!-- <wButton text="登 录" :rotate="isRotate" @click.native="startLogin()" class="wbutton"></wButton> -->
			<!-- 其他登录 -->
			<view class="other_login cuIcon">
				<view class="login_icon">
					<!-- <view class="cuIcon-weixin" @tap="login_weixin"></view> -->
				</view>
				<!-- <view class="login_icon">
          <view class="cuIcon-weibo" @tap="login_weibo"></view>
        </view>-->
				<!-- <view class="login_icon">
          <view class="cuIcon-github" @tap="login_github"></view>
        </view>-->
			</view>

			<!-- 底部信息 -->
			<view class="footer">
				<text open-type="navigate" @click="$goto('/pages/login/forget')">找回密码</text>
				<!-- <text>|</text>
        <navigator url="register" open-type="navigate">注册账号</navigator>-->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from "vuex";
	import md5 from 'js-md5'
	import service from '../../api/index.js'
	import {
		checkExpire
	} from "../../utils/auth.js";
	import {
		logoImage
	} from "./common";
	import wButton from "../../components/watch-login/watch-button.vue"; //button

	export default {
		components: {
			wButton
		},
		data() {
			return {
				//logo图片 base64
				logoImage: logoImage,
				// username: "yxlo", //用户/电话
				// password: "123456789", //密码
				username: "", //用户/电话
				password: "", //密码
				tenantId: "",
				isRotate: false, //是否加载旋转
				gotoUrl: "",
				switchUrl: "start",
				value: 0,
				range: []
			};
		},
		computed: {
			disabled() {
				return !this.username || !this.password || this.isRotate;
			}
		},
		onLoad() {
			this.isLogin();
			this.getAllTenantList()
		},
		methods: {

			getAllTenantList() {
				service.getTenantList().then(res => {
					let result = []
					res.data?.reduce((pre, cur) => {
						let cura = {
							value: cur.tenantId,
							text: cur.tenantName
						}
						result.push(cura)
					})
					this.range = result
				})
			},

			change(e) {
				console.log("e:", e);
			},
			...mapActions({
				login: "login",
				initSocket: "initSocket",
				getMainShop: "getMainShop",
				getShops: "getShops"
			}),
			isLogin() {
				// 检查
				// checkExpire(async res => {
				//   if (res) {
				//     // 直接跳转到相应页面
				//     if (this.gotoUrl) {
				//       this.$goto(this.gotoUrl);
				//     } else {
				//       uni.switchTab({
				//         url: `/pages/${this.switchUrl}/${this.switchUrl}`
				//       });
				//     }
				//   }
				// });
			},
			startLogin() {
				if (this.username == 'test' && this.password == '123456') {
					uni.switchTab({
						url: `/pages/index/index`
					});
				}
				if (this.disabled) return false;
				// 登录
				if (this.isRotate) {
					// 判断是否加载中，避免重复点击请求
					return false;
				}

				if (this.password.length < 6) {
					uni.showToast({
						icon: "none",
						title: "密码不正确"
					});
					return;
				}

				this.isRotate = true;
				this.login({
						tenantId: this.tenantId,
						username: this.username,
						password: md5(this.password)
					})
					.then(async res => {
						// await this.getMainShop();
						// await this.getShops();
						// this.$goto(this.switchUrl, {}, "tab");
						this.$goto("start");
					})
					.finally(async () => {
						this.isRotate = false;
					});
			},
			login_weixin() {
				// 微信登录
				uni.showToast({
					icon: "none",
					position: "bottom",
					title: "微信登录"
				});
			}
		}
	};
</script>

<style lang="scss">
	// @import url("../../components/watch-login/css/icon.css");
	// @import url("./css/main.css");
	$loginBtnHeight: 100rpx;
	$formFontSize: 38rpx;

	page {
		background-color: #ffffff;
	}

	.login {
		.footer {
			// margin-top: 30rpx;
			// position: fixed;
			// left: 0;
			// right: 0;
			// bottom: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			margin-top: 64rpx;
			color: rgba(0, 0, 0, 0.7);
			text-align: center;
			height: 40rpx;
			line-height: 40rpx;
		}

		.content {
			padding: 15vh 90rpx 0 90rpx;
			// padding-top: 200rpx;
		}

		.header {
			font-size: 60rpx;
		}

		.main {
			margin-top: 50rpx;
		}

		.input-wrap {
			padding: 35rpx 0;
			border-bottom: 1px solid $uni-border-color;
			font-size: $formFontSize;
			align-items: center;
			display: flex;

			&:last-child {
				margin-top: 10rpx;
			}

			.icon-wrap {
				color: grey;
				margin-right: 15rpx;
			}

			.login-placeholder {
				font-size: $formFontSize;
			}
		}

		.login-btn {
			margin-top: 80rpx;
			height: $loginBtnHeight;
			width: 100%;
			line-height: $loginBtnHeight;
			text-align: center;
			background-color: $themeColor;
			color: #ffffff;

			&.disabled {
				background-color: #dbdbdc;
			}
		}
	}
</style>